import { CloseOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd';
import classNamesFn from 'classnames';
import React from 'react';
import { DrawerPanelProps } from './interface';

const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
  const {
    prefixCls,
    classNames,
    styles,
    onClose,
    closeIcon = <CloseOutlined />,
    title,
    footer,
    closable = true,
    extra,
    children,
    cancelText = '取消',
    okText = '确认',
    onCancel,
    onOk,
  } = props;
  const {
    header: headerStyle,
    body: bodyStyle,
    footer: footerStyle,
  } = styles || {};
  const {
    header: headerClassName,
    body: bodyClassName,
    footer: footerClassName,
  } = classNames || {};

  const closeIconNode = closable && (
    <button
      type="button"
      onClick={onClose}
      aria-label="Close"
      className={`${prefixCls}-header-left-close`}
    >
      {closeIcon}
    </button>
  );

  function renderHeader() {
    if (!title) {
      return null;
    }
    return (
      <div
        className={classNamesFn(`${prefixCls}-header`, headerClassName)}
        style={headerStyle}
      >
        <div className={`${prefixCls}-header-left`}>
          {closeIconNode}
          {title && (
            <div className={`${prefixCls}-header-left-title`}>{title}</div>
          )}
        </div>
        {extra && <div className={`${prefixCls}-header-right`}>{extra}</div>}
      </div>
    );
  }

  function renderFooter() {
    if (!footer) {
      return null;
    } else if (typeof footer === 'boolean') {
      return (
        <div
          className={classNamesFn(`${prefixCls}-footer`, footerClassName)}
          style={footerStyle}
        >
          <div className={`${prefixCls}-footer-content`}>
            <Space size={8}>
              <Button
                key="cancel"
                onClick={(e) => {
                  onCancel?.(e);
                }}
              >
                {cancelText}
              </Button>
              <Button
                key="confirm"
                type="primary"
                onClick={(e) => {
                  onOk?.(e);
                }}
              >
                {okText}
              </Button>
            </Space>
          </div>
        </div>
      );
    } else {
      return (
        <div
          className={classNamesFn(`${prefixCls}-footer`, footerClassName)}
          style={footerStyle}
        >
          {footer}
        </div>
      );
    }
  }

  return (
    <div
      className={classNamesFn(`${prefixCls}-content`)}
      aria-modal="true"
      role="dialog"
    >
      {renderHeader()}
      <div
        className={classNamesFn(`${prefixCls}-body`, bodyClassName)}
        style={bodyStyle}
      >
        {children}
      </div>
      {renderFooter()}
    </div>
  );
};

export default DrawerPanel;
